<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            text-align: center;
        }

        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<button>截图</button>
<canvas width="600" height="600"></canvas>
<video src="videos/蜡笔小新.mp4" autoplay muted></video>

<script>
    var cas = document.querySelector("canvas");
    var ctx = cas.getContext("2d");
    var btn=document.querySelector("button");
    var video=document.querySelector("video")

   btn.onclick=function(){
       setInterval(function(){
           //截图
           ctx.drawImage(video,0,0,cas.width,cas.height);
           var aDom=document.createElement("a");
           aDom.href=cas.toDataURL();
           aDom.download="蜡笔小新";
           aDom.click();
       },1)






   }

</script>
</body>
</html>